import { LockOutlined, LoginOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import 'antd/dist/antd.css';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { KEY_STORE_TOKEN } from '../common/constant';
import http from '../common/http';
import './login.css';

// 没用
// function nav(path) {
//     console.info("path", path)
//     let navigate = useNavigate();
//     console.info("navigate", navigate)
//     navigate(path);
// }

class NormalLoginForm extends React.Component {

    constructor(props) {
        super(props)
    }

    handleSubmit = (values) => {
        http.post("/api/security/login", values)
            .then(res => {
                if (res.data.login === "ok") {
                    window.localStorage.setItem(KEY_STORE_TOKEN, res.data.token)
                    this.props.navigate("/");
                } else
                    message.error("登录失败")
            })
    }

    getHelp = (e) => {
        e.preventDefault()
        message.info("请联系技术支持，QQ: 2720553796")
    }

    render() {
        return (
            <div>
                <div style={{
                    margin: "auto", position: "absolute",
                    left: 0, top: 0, bottom: 0, right: 0,
                    width: 300, height: 250, backgroundColor: "#ffffff"
                }}>
                    <Form onFinish={this.handleSubmit} className="login-form"
                        initialValues={{ remember: true }}
                    >
                        <Form.Item name="account" rules={[{ required: true, message: '请输入账号！' }]}>
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
                        </Form.Item>
                        <Form.Item name="password" rules={[{ required: true, message: '请输入密码！' }]}>
                            <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} allowClear placeholder="密码" />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>
                            {/* <Link className="login-form-forgot" to="/reset-password">忘记密码</Link> */}
                            <a href="#!" className="login-form-forgot" onClick={this.getHelp}>忘记密码</a>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button"> <LoginOutlined /> 登录 </Button>
                            或
                            {/* <Link to="/register">现在注册！</Link> */}
                            <a href="#!" onClick={this.getHelp}> 现在注册！</a>
                        </Form.Item>
                    </Form>
                </div>
                <div style={{ position: "fixed", bottom: 0, right: 0, padding: "0px 3px", backgroundColor: "#ffc0cb" }}>
                    <b>网站备案号：</b>
                    <a href="http://beian.miit.gov.cn/" target="_blank">xxx</a>
                </div>
            </div>
        )
    }
}

// export default NormalLoginForm
function WithNavigate(props) {
    let navigate = useNavigate(); // 用作组件返回时才有用
    return <NormalLoginForm {...props} navigate={navigate} />
}
export default WithNavigate